<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="app">
    <input type="text" v-focus>
    <p v-pin:[direction]="200">距离顶部200px</p>
    <button @click="abs">距离左边200px</button>
</div>
<script src="../vue.js"></script>
<script>
    Vue.directive('pin',{
        //bind 只会执行一次
        bind:function (el,binding,vNode) {
            el.style.position = 'fixed';
            var direction = binding.arg ==='left'?'left':'top';
            el.style[direction] = binding.value + 'px';
        },
        //update : 当vnode有更新就会执行
        update:function (el,binding,vNode) {
            el.style.position = 'fixed';
            var direction = binding.arg ==='left'?'left':'top';
            el.style[direction] = binding.value + 'px';
        }
    })
    Vue.directive('focus',{
        // 函数命名    函数体（内容）
        // inserted:function () {}
        //inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
        inserted(el){
            el.focus();
        }

    });
    new Vue({
        el:'#app',
        data(){
            return {
                direction:'top',
            }
        },
        methods:{
            abs(){
                this.direction = 'left';
            }
        }
    })
    /*
    * Vue: MVVM框架，M:model(数据，data) -> v:view(视图)，数据的双向绑定
    *               V:view(视图) -> M:model(数据，data)
    * TP(PHP):MVC框架，
    *           M:model(模型，这边对数据的操作) v:view(视图，前台页面) c:controller(控制器，这边做逻辑的处理)
    */
</script>
</body>
</html>